<!DOCTYPE html>
<html>
<head>
	<title>反馈</title>
<link rel="stylesheet" href="__ROOT__/static/css/amazeui.min.css">
<script typet="text/javascript" src="__ROOT__/static/js/jquery-3.1.1.min.js"></script>
<script typet="text/javascript" src="__ROOT__/static/js/amazeui.min.js"></script>
</head>
<body>

<form class="am-form am-form-horizontal">
<div class="am-form-group">
<label for="doc-ipt-3" class="am-u-sm-2 am-form-label"><h2>反馈与建议</h2></label>
</div>
  <div class="am-form-group">
    <label for="doc-ipt-3" class="am-u-sm-2 am-form-label">您的姓名</label>
    <div class="am-u-sm-10">
      <input type="text" id="name" placeholder="输入你的姓名" style="width: 50%" value="{$username}">
    </div>
  </div>
  <div class="am-form-group">
    <label for="doc-ipt-3" class="am-u-sm-2 am-form-label">联系方式</label>
    <div class="am-u-sm-10">
      <input type="text" id="contact" placeholder="输入你的联系方式（手机号码、qq、邮箱等）" style="width: 50%">
    </div>
  </div>

  <div class="am-form-group">
    <label for="doc-ipt-pwd-2" class="am-u-sm-2 am-form-label">反馈内容</label>
    <div class="am-u-sm-10">
      <textarea id="content" style="width: 50%" placeholder="输入你的反馈内容，250字以内"></textarea><div id="limit_tip"></div><div id="input_tip">已输入<span id="already_input">0</span>字，还可以输入<span id="can_input">250</span>字</div>
    </div>
  </div>

  

  <div class="am-form-group">
    <div class="am-u-sm-10 am-u-sm-offset-2">
      <button type="button" class="am-btn am-btn-default" id="sub_btn" >提交反馈</button>
    </div>
  </div>
</form>
</body>
<script type="text/javascript">
	$('#content').bind('input propertychange', function() {
		var content = $('#content').val();
		if(content.length<=250){
			limit_tip.innerHTML = "";
			$('#input_tip').show();
			already_input.innerHTML = content.length;
			can_input.innerHTML = 250 - content.length;
			$('#sub_btn').attr('disabled',false);
		}else{
			$('#input_tip').hide();
			limit_tip.innerHTML = "<font color='#FF0000'>您输入的内容超过最大字数限制，请删减内容</font>";
			$('#sub_btn').attr('disabled',true);
		}
		
	});
	$('#sub_btn').on('click',function(){
		var name = $('#name').val();
		var contact = $('#contact').val();
		var content = $('#content').val();
		$.ajax({
			url:"{:url('fallback/add')}",
			type:'post',
			dataType:'json',
			data:{
				'name':name,
				'contact':contact,
				'content':content
			},
			success:function(data){
				alert(data.msg);
				if(data.code=='0'){
					location.reload();
				}
			}
		});
	});
</script>
</html>